<template></template>

<script setup lang="ts">

import { useVueCesium } from 'vue-cesium'
import type { VcViewerProvider, VcReadyObject } from 'vue-cesium/es/utils/types'

const $vc: VcViewerProvider = useVueCesium()

$vc.creatingPromise.then((readyObj: VcReadyObject) => {

    let Cesium: any = readyObj.Cesium
    let viewer = readyObj.viewer

    // 使用primitive方式加载geojson
    let urlPath = new URL('./test.json', import.meta.url).href;

    var sncPolygon = Cesium.GeoJsonDataSource.load(
        urlPath, { clampToGround: false } //开启贴地  
    );

    sncPolygon.then(function (dataSource) {
        readyObj.viewer.dataSources.add(dataSource);
        readyObj.viewer.flyTo(dataSource, {
            offset: {
                heading: -0.3,
                pitch: -0.8,
                range: 0
            }
        }
        );

        var entities = dataSource.entities.values;

        for (var i = 0; i < entities.length; i++) {
            var entity: any = entities[i];
            console.log(entity);

            let personNum = entity._properties.personNum._value
            var name = `${entity.name} 人口 ${personNum}`;

            // 颜色
            let color = entity._properties.color._value
            entity.polygon.material = new Cesium.ColorMaterialProperty(
                Cesium.Color.fromCssColorString(color).withAlpha(0.5)
            );

            // 边框
            entity.polygon.outline = false;
            // entity.polygon.outlineColor = Cesium.Color.LIGHTGREEN.withAlpha(1);
            // entity.polygon.outlineWidth = 2;

            // 距离地面距离
            entity.polygon.extrudedHeight = 10000;

            // 后去polygon中心点坐标
            var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
            var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
            polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
            entity.position = polyCenter;

            // 标注
            entity.label = {
                text: name,
                color: Cesium.Color.fromCssColorString('#fff'),
                font: 'normal 16px MicroSoft YaHei',
                // 对齐方式(水平和竖直)
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                showBackground: true,
                backgroundColor: new Cesium.Color.fromBytes(0, 0, 0).withAlpha(0.7),
                // 这里设置了就不会被遮盖了，设为负值则在更上层
                eyeOffset: new Cesium.Cartesian3(0, 0, -200000),
                // 视野显示label距离
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 200000.0),
                disableDepthTestDistance: 200000
            }
        }
    });
    //去锯齿 使文字清晰
    readyObj.viewer.scene.postProcessStages.fxaa.enabled = false;
})

</script>